@charset "UTF-8";

.fadeUp {
  animation: fade-up 0.5s ease-in-out 1 both;
}

.fadeIn {
  animation: fade-in 1s ease-in-out 1 both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-right-down {
  from {
    opacity: 0;
    transform: translateY(-60px) translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

@keyframes fade-left-down {
  from {
    opacity: 0;
    transform: translateY(-60px) translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bounce-down {
  25% {
    transform: translateY(-4px);
  }

  50%,
  100% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(4px);
  }
}

@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

@keyframes my-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes my-rotate-reverse {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
